<template>
  <span
    v-if="show"
    class="block slider"
    :class="`count-${item.value}`"
    :style="{
      transform: `translate(${offset.left}00%, ${offset.top}00%) scale(${scale})`,
      'transition-duration': `${frameTime}ms`,
    }"
  >
    <p class="count">{{ item.value }}</p>
  </span>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import { CountBlock } from "../Item/count";
import { sleepFrame } from "../utils";

const props = defineProps<{
  item: CountBlock;
  frameTime: number;
}>();

const offset = computed(() => {
  const left = props.item.position % 4;
  const top = (props.item.position - left) / 4;
  return { left, top };
});
const scale = ref(0);
const show = ref(true);

const showup = async () => {
  show.value = false;
  scale.value = 0.1;
  await sleepFrame();
  show.value = true;
  await sleepFrame();
  scale.value = 1;
};

watch(
  () => props.item.value,
  (val) => {
    val && showup();
  },
  { immediate: true }
);
/**
 * 2 #eee4da
 * 4 #ede0c8
 * 8 #f2b179
 */
</script>
<style lang="scss" scoped>
.slider {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ede4da;
  transition-property: transform;
  transform-origin: center;
}

.count {
  text-align: center;
  font-size: 4.5em;
  font-weight: 900;
  margin-top: 50%;
  transform: translateY(-50%);
}
.count-2 {
  background-color: #eee4da;
}
.count-4 {
  background-color: #ede0c8;
}
.count-8 {
  background-color: #f2b179;
  color: #f5f5f5;
}
.count-16 {
  background-color: #ebf25a;
}
.count-32 {
  background-color: #f27fc5;
  color: #f5f5f5;
}
.count-64 {
  background-color: #ca81f2;
  color: #f5f5f5;
}
.count-128 {
  background-color: #6a7bf2;
  color: #f5f5f5;
}
.count-256 {
  background-color: #6ec5f2;
}
.count-512 {
  background-color: #69f2ef;
}
.count-1024 {
  background-color: #5cf2ad;
}
.count-2048 {
  background-color: #66f24d;
}
.count-4096 {
  background-color: #f25f00;
  color: #f5f5f5;
}
.count-8192 {
  background-color: #f23000;
  color: #f5f5f5;
}
.count-16384 {
  background-color: #f20000;
  color: #f5f5f5;
}
.count-65536 {
  background-color: #f2002f;
  color: #f5f5f5;
}
.count-131072 {
  background-color: #f2005d;
  color: #f5f5f5;
}
</style>
